<template>
  <div>
    <div :id="mainContainerId" class="container" :style="`width: ${containerWidth}px;height: ${containerHeight}px;`"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, isReactive, watch, reactive, toRaw } from 'vue'
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'

const containerWidth = ref(800)
const containerHeight = ref(500)

const mainContainerId = ref('id_'+Math.random().toFixed(10).split('.')[1])

function createFrame(containerId) {
  // 创建场景
  const scene = new THREE.Scene();
  // 创建相机
  const camera = new THREE.PerspectiveCamera(30, containerWidth.value/containerHeight.value, 0.1, 1000);
  // const camera = new THREE.OrthographicCamera( -3, 3, 3, -3, 0.1, 1000 );
  camera.position.z = 10;
  // 创建渲染器
  const mainContainer = document.querySelector('#'+containerId)
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  // renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setSize(containerWidth.value, containerHeight.value);
  mainContainer.appendChild(renderer.domElement);
  // 添加灯光
  const light = new THREE.SpotLight(0xffffff, 1);
  light.position.set(5, 5, 5);
  scene.add(light);
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
  scene.add(ambientLight);

  // 添加鼠标控制
  const controls = new OrbitControls(camera, renderer.domElement);

  // 处理鼠标事件
  const raycaster = new THREE.Raycaster();
  const mouse = new THREE.Vector2();
  const onMouseDoubleClick = (event) => {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children, true);
    for (let i = 0; i < intersects.length; i++) {
      console.log('Double clicked', intersects[i].object)
      if (intersects[i].object.onSelected) {
        intersects[i].object.onSelected()
      }
      // if (intersects[i].object === box1) {
      //   console.log('Box 1 double clicked');
      // } else if (intersects[i].object === box2) {
      //   console.log('Box 2 double clicked');
      // }
    }
  };
  window.addEventListener('dblclick', onMouseDoubleClick, false);

  // 渲染场景
  const animate = () => {
    // console.log('animate', new Date().getTime())
    requestAnimationFrame(animate);
    // box1.rotation.x += 0.01;
    // box1.rotation.y += 0.01;
    // box2.rotation.x += 0.01;
    // box2.rotation.y += 0.01;
    // arrow.rotation.x += 0.01;
    // arrow.rotation.y += 0.01;
    renderer.render(scene, camera);
  };
  animate();

  scene.position.y = 0

  return {
    scene,
    camera,
    renderer
  }
}

let frame = null

function addObjects() {
  if (!frame) {
    return
  }

  const newObjs = props.obj3Ds
  console.log('Number of objects to be added', newObjs.length)
  for (let obj of newObjs) {
    // console.log('Adding', obj)
    frame.scene.add(toRaw(obj))  // The object will be changed internally, so must be raw.
  }
  console.log('After addObjects, scene children', frame.scene.children.length)
}

const props = defineProps({
  obj3Ds: Array
})

watch(props, ()=>{
  console.log('ThreeFrame props changed', props)
  addObjects()
})

onMounted(() => {
  console.log('ThreeFrame mounted.', 'props', props)
  frame = createFrame(mainContainerId.value)
  console.log('frame', frame)
  addObjects()
  // loadFont()
})

</script>

<style scoped>
</style>